<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<div class="author">
   姝琬的天气预报
</div>
<link rel="stylesheet" href="index.css">
<div class="top-box">
    <div class="title">
<span class="dateShort"></span>
<span class="calendar">&nbsp;
    <span class="dateLunar"></span>
</span>
</div>
<div class="search-box">
<div class="location">
    <span class="area">海口市</span>
</div>
<div class="search">
    <input type="text" placeholder="搜索城市" autocomplete="off" class="search-city">
    <ul class="search-list">
        <li class="city-item"></li>
    </ul>
</div>
</div>
    </div>
<div class="weather-box">
    <div class="tem-box">
<span class="temp">
    <span class="temperature">26</span>
    <span>℃</span>
</span>
</div>
<div class="climate-box">
<div class="air">
    <span class="psPm25">35</span>
    <span class="psPm25Level">优</span>
</div>
<ul class="weather-list">
    <li class="first">
        <img src="https://hmajax.itheima.net/weather/duoyunline.png" alt="" class="weatherImg">
        <span class="weather">多云</span>
    </li>
    <li class="windDirection">东北风</li>
    <li class="windPower">1级</li>
</ul>
</div>
    </div>
<div class="today-weather">
    <div class="range-box">
<span>今天：</span>
<span class="range">
<span class="weather">小雨</span>
<span class="temNight">25</span>
<span>-</span>
<span class="temDay">32</span>
<span>℃</span>
</span>
</div>
<ul class="sun-list">
<li>
    <span>紫外线</span>
    <span class="ultraviolet">中等</span>
</li>
<li>
    <span>湿度</span>
    <span class="humidity">92.0</span>%
</li>
<li>
    <span>日出</span>
    <span class="sunriseTime">05:22</span>
</li>
<li>
    <span>日落</span>
    <span class="sunsetTime">19:12</span>
</li>
</ul>
    </div>
<div class="week-weather-box">
<div class="title">7日内天气预报</div>
<ul class="week-wrap">
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">今天</span>
        <span class="date">07月26日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
    <span class="weather">小雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">32</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">明天</span>
        <span class="date">07月27日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
    <span class="weather">小雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">32</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">后天</span>
        <span class="date">07月28日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/leizhenyu.png" alt="" class="Img">
    <span class="weather">雷阵雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">26</span>~
        <span class="temDay">31</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">周六</span>
        <span class="date">07月29日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
    <span class="weather">小雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">30</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">周日</span>
        <span class="date">07月30日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/zhongyu.png" alt="" class="Img">
    <span class="weather">中雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">30</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">南风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">周一</span>
        <span class="date">07月31日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/zhongyu.png" alt="" class="Img">
    <span class="weather">中雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">31</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东南风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">周二</span>
        <span class="date">08月01日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/zhenyu.png" alt="" class="Img">
    <span class="weather">阵雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">34</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东北风</span>
        <span class="windPower">&lt;&lt;3级</span>
    </div>
</li>
        </ul>

</div>
<script src="index.js">
    
</script>
</html>